<template>
  <div class="content">
    <div class="left_layout">
      <div>新对话</div>
      <div>今天</div>
      <div>前七天</div>
    </div>
    <div class="right-box">
      <div class="top-title">
        全球气候变暖如何用科学解释
      </div>
      <div class="chart-box">
        <div class="ai">left</div>
        <div class="user">right</div>
      </div>
      <div></div>
    </div>

  </div>
</template>

<script>
export default {
  name: "ai"
}
</script>

<style scoped lang="scss">

.left_layout {
  flex: 1;
  border-right: 1px solid lightgray;
}

.right_layout {
  flex: 6;
}

.father_icon {
  position: relative;
}

.son_icon {
  background-color: white;
  z-index: 99;
  position: absolute;
  font-size: 20px;
  border-radius: 50%;
  border: 1px solid lightgray;
  padding: 0px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  color: gray;
}

.son_icon_display {
  top: 48vh;
  right: -15px;
}

.son_icon_hideen {
  top: 48vh;
  left: 10px;
  display: none;
}

.new_chat {
  border: 1px solid lightgray;
  padding: 10px 20px;
  margin: 20px 10px;
  text-align: center;
}

.new_chat_text {
  border: 1px solid green;
  display: flex;
}

.left_person {
  width: 100%;
  padding: 1vh 20px;
  /* margin:20px 10px; */
  position: absolute;
  top: 90vh;
  border-top: 1px solid lightgray;
}

.false_img {
  /* background:linear-gradient(-135deg,#0c80cc,#009dff); */
  flex: 1;
}

.false_img_right {
  flex: 3;
}

.flase_img_son {
  width: 50px;
  height: 50px;
  background: linear-gradient(-135deg, #0000cc, #009dff);
  border: 1px solid lightblue;
  border-radius: 50%;
}

.right_layout_flex{
  display:flex;
  justify-content: center;
  align-items: center;
}
.right_layout_son{
  margin:0 auto 0 auto;
  width:100vh;
  height:98vh;
  /* border:1px solid gray; */
  position: relative;
}
.right_layout_son_ipt{
  position: absolute;
  bottom:0;
}
.btn{
  border:none;
  padding:10px 15px;
  background-color: #18a058;
  border-radius: 1px;
  color:white;
}
.ipt{
  width:85vh;
  margin:10px 20px;
  padding:10px 20px;
  border:1px solid lightgray;
}
.right_layout_myselfChat{
  width:200px;
  position: absolute;
  top:5px;
  right:0;
  display:flex;
}
.myself_chat{
  position: absolute;
  top:30px;
  right:80px;
  padding:10px 20px;
  border-radius: 10px;
  background-color: #7ae1b6;
  opacity: 0.8;
}
</style>
